<template>
  <div class="lianxi_main">
    <m-header modile-title="练习1" go-back="true"></m-header>
    <div class="lunbo">
      <!--广告轮播-->
      <div class="demo-rollnotice">
        <img src="../image/jd-news-tit.png" alt="">
        <yd-rollnotice autoplay="2000">
          <yd-rollnotice-item><span style="color:#F00;"> 荐</span>荣耀V9 3月超级钜惠！</yd-rollnotice-item>
          <yd-rollnotice-item><span style="color:#F00;"> 荐</span>3.23京东超级品牌日格力盛典</yd-rollnotice-item>
          <yd-rollnotice-item><span style="color:#F00;"> 荐</span>京东服饰 早春新品低至7折</yd-rollnotice-item>
        </yd-rollnotice>
      </div>
      <!--点击弹窗-->
      <div class="tanchuang">
        <yd-button size="large" type="warning" @click.native="show2 = true">下部弹出</yd-button>
        <yd-popup v-model="show2" position="bottom" height="60%">
          <div class="yd-btn-list">
            <yd-button type="warning" style="margin-right: 0;" @click.native="show2 = false">X</yd-button>
          </div>
          <div class="content_word">
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
            <p>该容器超出内容出现滚动条，IOS上禁止滚动底层容</p>
          </div>
        </yd-popup>
      </div>
      <!--星星提示-->
      <div class="start">
        <yd-cell-group>
          <yd-cell-item>
            <yd-rate slot="left" v-model="rate7" :show-text="['很差','还行','一般','挺好','非常好']"></yd-rate>
            <span slot="right" @click="startBtn()">评论点击</span>
          </yd-cell-item>
          <yd-cell-item>
            <yd-rate slot="left" v-model="rate8" :show-text="tipText"></yd-rate>
            <span slot="right" @click="startBtn2()">表情提示</span>
          </yd-cell-item>
          <div class="gif_box">
            <img v-show="rate8===1" src="../image/face/26.gif"/>
            <img v-show="rate8===2" src="../image/face/5.gif"/>
            <img v-show="rate8===3" src="../image/face/30.gif"/>
            <img v-show="rate8===4" src="../image/face/25.gif"/>
            <img v-show="rate8===5" src="../image/face/46.gif"/>
          </div>
        </yd-cell-group>
      </div>
      <!--图片预览-->
      <div class="img_show">
        <yd-lightbox>
          <yd-lightbox-img v-for="item, key in list" :key="key" :src="item.src"></yd-lightbox-img>
        </yd-lightbox>
      </div>

      <!--pdf显示-->
      <div style="padding-top: 2em">
        <div style="width: 100%">
          <p @click="openPDF">点击我打开PDF</p>

          <pdf ref="pdf" src="http://pic.zgwyzxw.cn/article%2Fthumb%2F20210427155739_882256_%E8%A7%82%E9%82%B8%E5%9B%BD%E9%99%85%E9%80%89%E8%81%98%E5%8A%9E%E6%B3%95-%E7%89%A9%E4%B8%9A%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C%EF%BC%88%E8%8D%89%E6%A1%88%EF%BC%89.pdf"></pdf>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
  .lianxi_main {
    width: 100%;
    padding-top: 60px;
    background: #fff;
    .lunbo {
      height: 40px;
      padding-top: 5px;
      .demo-rollnotice {
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        background-color: #fff;
        padding: 0 12px;
        img {
          width: 73px;
          height: 16px;
          margin-right: 4px;
        }
      }
      .tanchuang {
        .yd-popup-content {
          position: relative;
          .yd-btn-list {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #f2f2f2;
            display: inline-flex;
            align-items: center;
            padding-left: 10px;
            position: fixed;
            background: #fff;
            z-index: 22;
          }
          .content_word {
            padding: 50px 10px 10px 18px;
            p {
              font-size: 15px;
              line-height: 30px;
            }
          }
        }

      }
      .start {
        .yd-cell-item {
          position: relative;
        }
        .gif_box {
          position: absolute;
          right: 100px;
          top: 64px;
        }
      }
      .img_show{
        img{
          width: 33%;
          padding-left: 1%;
          padding-top: 1%;
        }
      }
    }
  }
</style>
<script>
  import mHeader from '../../../../components/header'
  import {Toast} from 'mint-ui'
  import pdf from 'vue-pdf'

  export default {
    data() {
      return {
        show2: false,
        rate7: 0, // 表示默认星星点亮的颗数
        rate8: 1,
        tipText: [
          '<span style="color:red;">$ 分 - 很差</span>',
          '<span style="color:blue;">$ 分 - 勉强</span>',
          '<span style="color:green;">$ 分 - 一般</span>',
          '<span style="color:deeppink;">$ 分 - 挺好</span>',
          '<span style="color:#ffb400;">$ 分 - 非常好</span>'
        ],
        list: [
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3929393.jpg'},
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3928026.jpg'},
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3921929.jpg'},
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3930093.jpg'},
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3925970.png'},
          {src: 'https://y.gtimg.cn/music/common/upload/MUSIC_FOCUS/3929169.jpg'}
        ],
        img: '../../../../assets/logo.png',
        pdfUrl: '../../../../assets/article_thumb_20210427155739_882256_观邸国际选聘办法-物业服务合同（草案）.pdf'
      }
    },
    methods: {
      startBtn() {
        console.log(this.rate7)
      },
      startBtn2() {
        console.log(this.rate8)
      },
      openPDF(){
        window.open('http://pic.zgwyzxw.cn/article%2Fthumb%2F20210427155739_882256_%E8%A7%82%E9%82%B8%E5%9B%BD%E9%99%85%E9%80%89%E8%81%98%E5%8A%9E%E6%B3%95-%E7%89%A9%E4%B8%9A%E6%9C%8D%E5%8A%A1%E5%90%88%E5%90%8C%EF%BC%88%E8%8D%89%E6%A1%88%EF%BC%89.pdf')
      }
    },
    components: {
      mHeader,
      pdf
    }
  }
</script>
